<template>
  <a-card :bordered="false">
    <a-form :form="form">
      <a-row :gutter="24">
        <a-col :xl="12" :lg="12" :md="12" :sm="24">
          <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="核销总单名称">
            <a-input placeholder="请输入核销总单名称" @blur="changeInput" v-decorator="['auditName',
              {rules:validatorRules.auditName.rules, initialValue:this.auditDl.auditName}]"/>
          </a-form-item>
        </a-col>
        <a-col :xl="12" :lg="12" :md="12" :sm="24">
          <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="备注">
            <a-textarea placeholder="请输入备注" v-decorator="['remarks', {}]"/>
          </a-form-item>
        </a-col>
      </a-row>
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">

            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="客户">
                <a-input placeholder="请输入客户名" v-model="queryParam.custName"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
            </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-form>
    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleActModal" type="primary" icon="plus">新增</a-button>
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel">
            <a-icon type="delete"/>
            删除
          </a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px"> 批量操作
          <a-icon type="down"/>
        </a-button>
      </a-dropdown>
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{
          selectedRowKeys.length
        }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>


      <a-table
          ref="table"
          size="middle"
          bordered
          rowKey="id"
          :columns="columns"
          :data="loadEditData"
          :pagination="false"
          :loading="loading"
          class="j-table-force-nowrap"
          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
          @change="handleTableChange"
      >
        <template v-for="(col, index) in columns" v-if="col.scopedSlots" :slot="col.dataIndex" slot-scope="text, record, index">
          <div :key="index">
            <a-input
                v-if="record.editable"
                style="margin: -5px 0"
                :value="text"
                @change="e => handleChange(e.target.value, record, col)"
            />
            <template v-else>{{ text }}</template>
          </div>
        </template>
        <template slot="action" slot-scope="text, record, index">

          <div class="editable-row-operations">
          <span v-if="record.editable">
            <a @click="() => save(record)">保存</a>
            <a-divider type="vertical"/>
            <a-popconfirm title="真的放弃编辑吗?" @confirm="() => cancel(record)">
              <a>取消</a>
            </a-popconfirm>
          </span>
            <span v-else>
            <a class="edit" @click="() => edit(record)">修改</a>
            <a-divider type="vertical"/>
            <a class="delete" @click="() => del(record)">删除</a>
          </span>
          </div>
          <a-divider type="vertical"/>
          <a-dropdown>
            <a class="ant-dropdown-link">更多
              <a-icon type="down"/>
            </a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a @click="handleEdit(record)">编辑</a>
              </a-menu-item>
              <a-menu-item>
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>

        </template>
      </a-table>

      <!--      <a-table-->
      <!--        ref="table"-->
      <!--        size="middle"-->
      <!--        bordered-->
      <!--        rowKey="id"-->
      <!--        :columns="columns"-->
      <!--        :dataSource="dataSource"-->
      <!--        :pagination="ipagination"-->
      <!--        :loading="loading"-->
      <!--        class="j-table-force-nowrap"-->
      <!--        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"-->
      <!--        @change="handleTableChange">-->

      <!--        <div slot="action" slot-scope="text, record">-->
      <!--          <a @click="handleEdit(record)">编辑</a>-->

      <!--          <a-divider type="vertical"/>-->
      <!--          <a-dropdown>-->
      <!--            <a class="ant-dropdown-link">更多 <a-icon type="down"/></a>-->
      <!--            <a-menu slot="overlay">-->
      <!--              <a-menu-item>-->
      <!--                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">-->
      <!--                  <a>删除</a>-->
      <!--                </a-popconfirm>-->
      <!--              </a-menu-item>-->
      <!--            </a-menu>-->
      <!--          </a-dropdown>-->
      <!--        </div>-->

      <!--      </a-table>-->
    </div>
    <!-- table区域-end -->
    <!-- 表单区域 -->
    <ActDetailModal
        modal-width="90%"
        ref="ActDetailModal"
        @ok="handelSaveWhite">
    </ActDetailModal>
  </a-card>
</template>

<script>
import STable from '@/components/table/'
import '@/assets/less/TableExpand.less'
import TpmAuditActDetailModal from './modules/TpmAuditActDetailModal'
import {PageListMixin} from '@/mixins/PageListMixin'
import ActDetailModal from '../../../components/cn-select-popup/ActDetailModal'
import {postAction} from '../../../api/manage'
import pick from 'lodash.pick'

export default {
  name: 'TpmAuditActDetailList',
  mixins: [PageListMixin],
  props: ['tempUuid', 'auditDl'],
  components: {
    TpmAuditActDetailModal, ActDetailModal, STable
  },
  data() {
    return {
      isNoPagnation: true,
      description: '核销活动明细表管理页面',
      labelCol: {
        xs: {span: 24},
        sm: {span: 5},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      },
      validatorRules: {
        auditName: {
          rules: [{
            required: true, message: '请填写核销总单名称!',
          }],
        },
      },
      form: this.$form.createForm(this),
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '申请活动明细编码',
          align: 'center',
          dataIndex: 'actDetailCode'
        },
        {
          title: '客户',
          align: 'center',
          dataIndex: 'customerName'
        },

        {
          title: '门店',
          align: 'center',
          dataIndex: 'terminalName'
        },

        {
          title: '活动大类',
          align: 'center',
          dataIndex: 'categoriesName'
        },
        {
          title: '活动细类',
          align: 'center',
          dataIndex: 'categoriesDetailName'
        },
        {
          title: '支付方式',
          align: 'center',
          dataIndex: 'payType'
        },
        {
          title: '申请金额',
          align: 'center',
          dataIndex: 'amount',
          scopedSlots: { customRender: 'amount' },
        },
        {
          title: '本次核销金额',
          align: 'center',
          dataIndex: 'currentAmount',
          scopedSlots: { customRender: 'currentAmount' },
        },
        {
          title: '核销备注',
          align: 'center',
          dataIndex: 'actRemarks',
          scopedSlots: { customRender: 'actRemarks' },
        },
        {
          title: '是否完成核销',
          align: 'center',
          dataIndex: 'auditStatus'
        },
        {
          title: '已核销金额',
          align: 'center',
          dataIndex: 'auditAmount'
        },
        {
          title: '操作',
          align: 'center',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
        delete: window._CONFIG['domianTpmURL'] + '/audit/tpmAuditActDetail/delete',
        deleteBatch: window._CONFIG['domianTpmURL'] + '/audit/tpmAuditActDetail/deleteBatch'
      }
    }
  },
  created() {
  },
  computed: {},
  mounted() {
    // this.initValue_()
  },
  methods: {
    loadEditData() {
      return new Promise(resolve => {
        this.$nextTick(() => {
          postAction(window._CONFIG['domianTpmURL'] + '/audit/tpmAuditActDetail/findPageList', {tempUuid: this.tempUuid}).then(res => {
            resolve({data: res.result})
          })
        })
      })
    },
    initValue_() {
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.auditDl, 'auditCode', 'auditName', 'remarks'))
      });
    },
    handelSaveWhite(actlist) {
      const record = {tempUuid: this.tempUuid}
      record.detailVos = actlist
      var that = this
      postAction(window._CONFIG['domianURL'] + "/audit/tpmAuditActDetail/saveOrUpdate", record).then(async (res) => {
        if (res.success) {
          that.$message.success(res.message);
          await this.loadData();
          this.$refs.ActDetailModal.close()
        } else {
          this.$message.warning(res.message);
        }
      }).finally(() => {
        this.$refs.ActDetailModal.confirmLoading = false;
      })
    },
    async handleActModal(record) {
      this.$refs.ActDetailModal.showModal(this.tempUuid)
    },
    changeInput() {
      let obj = Object.assign({}, this.auditobj);
      obj.auditName = this.form.getFieldValue("auditName");
      this.$emit('auditobj', obj)
    },
    edit(row) {
      row.editable = true
      // row = Object.assign({}, row)
      this.$refs.table.updateEdit()
    },
    // eslint-disable-next-line
    del(row) {
      this.$confirm({
        title: '警告',
        content: '真的要删除吗?',
        okText: '删除',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          console.log('OK');
          // 在这里调用删除接口
          return new Promise((resolve, reject) => {
            setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
          }).catch(() => console.log('Oops errors!'));
        },
        onCancel() {
          console.log('Cancel');
        },
      });
    },
    save(row) {
      row.editable = false
      this.$refs.table.updateEdit()
      var that = this
      postAction(window._CONFIG['domianURL'] + "/audit/tpmAuditActDetail/saveOrUpdate", row).then(async (res) => {
        if (res.success) {
          that.$message.success(res.message);
          await this.loadData();
        } else {
          this.$message.warning(res.message);
        }
      }).finally(() => {
      })
    },
    cancel(row) {
      delete row.editable
      this.$refs.table.updateEdit()
    },

    handleChange (value, record, column) {
      record[column.dataIndex]= value
    },
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
